<template>
  <!--  底部导航栏-->
  <tab-bar class="tabBar">
    <tab-bar-item path="/home">
      <span slot="item-icon" class="iconfont iconHome"></span>
      <div slot="item-text">首页</div>
    </tab-bar-item>

    <tab-bar-item path="/category">
      <span slot="item-icon" class="iconfont iconcart"></span>
      <div slot="item-text">分类</div>
    </tab-bar-item>

    <tab-bar-item path="/cart">
      <span slot="item-icon" class="iconfont iconmy"></span>
      <div slot="item-text">购物车</div>
    </tab-bar-item>

    <tab-bar-item path="/profile">
      <span slot="item-icon" class="iconfont iconCategory"></span>
      <div slot="item-text">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
  import TabBar from "components/common/tabBar/TabBar.vue";
  import TabBarItem from "components/common/tabBar/TabBarItem.vue";

  export default {
    name: "MainTabBar",
    components:{
      "tab-bar": TabBar,
      "tab-bar-item": TabBarItem
    }
  }
</script>

<style>
  .iconfont{
    font-size: 24px;
  }
</style>

